<!-- 服务区级别 -->
<template>
  <div class="background">
    <header-module :title="'headquartersServer'" originName="headquartersServer"></header-module>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <!-- <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div> -->
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item, index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{ item.name }}</div>
              <div v-else class="yz-box-item-text">{{ item.name }}</div>
            </div>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item, index) in dmyItems" @click="dmyClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{ item.name }}</div>
              <div v-else class="yz-box-item-text">{{ item.name }}</div>
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'今日车客流'" />
          <div class="yz-content-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="ckl">
              <div class="ckl-item">
                <div class="ckl-flex-between">
                  <div class="ckl-title">
                    <div class="ckl-title-p1">总车流</div>
                    <div class="ckl-title-p2">{{ (state.jrcklxx.cl_jt).toFixed(2) }}万次</div>
                  </div>
                  <div class="ckl-echarts" style="height: 60px;width: 60px">
                    <div ref="ckl1Ref" style="height: 60px"></div>
                  </div>
                </div>
                <div class="ckl-bottom">
                  <div class="ckl-bottom-key">昨日车流：</div>
                  <div class="ckl-bottom-value">{{ (state.jrcklxx.cl_zt).toFixed(2) }}万次</div>
                </div>
              </div>
              <div class="ckl-item">
                <div class="ckl-flex-between">
                  <div class="ckl-title">
                    <div class="ckl-title-p1">总客流</div>
                    <div class="ckl-title-p2">{{ (state.jrcklxx.kl_jt ).toFixed(2) }}万次</div>
                  </div>
                  <div class="ckl-echarts" style="height: 60px;width: 60px">
                    <div ref="ckl2Ref" style="height: 60px"></div>
                  </div>
                </div>
                <div class="ckl-bottom">
                  <div class="ckl-bottom-key">昨日客流：</div>
                  <div class="ckl-bottom-value">{{ (state.jrcklxx.kl_zt ).toFixed(2) }}万次</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'年度水电费用'" />
          <div class="yz-content-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div ref="ndsdfyRef" class="chart"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'业态销售趋势'" />
          <div class="yz-content-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="yz-common-small-title yz-common-small-title2">
              <div class="yz-common-title-navs top3">
                <div :class="['yz-common-title-nav', 'md-4', { 'selected': item.selected }]" :style="{'width': item.name.length>2 ? '6vh':'4vh'}"
                     v-for="(item, index) in ytxsqs_navs" @click="ytxsqsClick(item.type)">
                  <span class="nav-title">{{ item.name }}</span>
                  <span v-if="index < ytxsqs_navs.length - 1" class="rightLine">|</span>
                </div>
              </div>
              <div class="yz-common-title-navs top3">
                <div :class="['yz-common-title-nav','md-4', { 'selected': item.selected }]"
                     v-for="(item, index) in ytsxqs_navs_child" @click="ytxsqsChildClick(item.type)">
                  <span class="nav-title">{{ item.name }}</span>
                  <span v-if="index < ytsxqs_navs_child.length - 1" class="rightLine">|</span>
                </div>
              </div>
            </div>
            <div ref="ytxsqsRef" class="chart"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow numbg">
            <div class="car_flow_text">总销售</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item, index) in currentZongxiaoshouOptionsOptions.num">
                <div v-if="isNumeric(item)">
                  <!-- 有背景图，然后把数字拆分  -->
                  <countTo :startVal='0' :endVal='item || 0' :duration='5000'></countTo>
                </div>
                <div v-else>
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="car_flow_unit">万元</div>
          </div>
        </div>

        <div class="yz-box2-items is-circle">
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ state.xsxx.yz }}</div>
            <div class="yz-box2-p center">油站</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ state.xsxx.jq }}</div>
            <div class="yz-box2-p center">加气</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ state.xsxx.cd }}</div>
            <div class="yz-box2-p center">充电</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ state.xsxx.sc }}</div>
            <div class="yz-box2-p center">商超</div>
          </div>
          <div class="yz-box2-item" style="width: 33.333%">
            <div class="yz-box2-p">{{ state.xsxx.cy }}</div>
            <div class="yz-box2-p center">餐饮</div>
          </div>
          <div class="yz-box2-item" style="width: 33.333%">
            <div class="yz-box2-p">{{ state.xsxx.kf }}</div>
            <div class="yz-box2-p center">客房</div>
          </div>
          <div class="yz-box2-item" style="width: 33.333%">
            <div class="yz-box2-p">{{ state.xsxx.wysh }}</div>
            <div class="yz-box2-p center">物业商户</div>
          </div>
        </div>

        <div class="yz-box2-items is-wc">
          <contentTitle :title="'实时动态'" />
          <div class="yz-box2-item" style="width: 30%">
            <div class="wc-charts" ref="wcRef1"></div>
          </div>
          <div class="yz-box2-item" style="width: 30%">
            <div class="wc-charts" ref="wcRef2"></div>
          </div>
          <div class="yz-box2-item" style="width: 30%">
            <div class="wc-charts" ref="wcRef3"></div>
          </div>
        </div>


      </div>
      <!-- 右边 -->
      <div class="content_info">
        <div class="yz-box2-items" style="justify-content: flex-end;">
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">0</div>
            <div class="yz-box2-p center">截面车流</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ state.ratioData.kehuobi }}</div>
            <div class="yz-box2-p center">客货比</div>
          </div>
          <div class="yz-box2-item" style="width: 25%">
            <div class="yz-box2-p">{{ state.ratioData.ruqulv }}</div>
            <div class="yz-box2-p center">入区率</div>
          </div>
        </div>


        <div class="content_info_item">
          <contentTitle :title="'商铺排行'" />
          <div class="yz-content-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="yz-common-small-title yz-common-small-title2">
              <div class="yz-common-title-navs top3">
                <div :class="['yz-common-title-nav', 'md-4', { 'selected': item.selected }]" :style="{'width': item.name.length>2 ? '6vh':'4vh'}"
                     v-for="(item, index) in spph_navs" @click="spphClick(item.type)">
                     <span class="nav-title">{{ item.name }}</span>
                  <span v-if="index < ytxsqs_navs.length - 1" class="rightLine">|</span>
                </div>
              </div>
            </div>
            <div class="yz-common-content" style="margin-top: 4vh;width: 100%">
              <div class="yz-common-bar-item" v-for="(item, index) in state.spph">
                <div class="yz-common-bar-icon">
                  <div class="num">{{ index + 1 }}</div>
                </div>
                <div class="yz-common-bar-progress" style="width: 90%">
                  <div class="yz-common-bar-progress-word">
                    <div>{{ item.psnname }}</div>
                    <div>{{ item.taxsaleamnt.toFixed(2) }}万元</div>
                  </div>
                  <div class="yz-common-bar-progress-line">
                    <div :style="{width : item.zb }" class="process"></div>
                    <div class="yz-common-bar-progress-line-tip" style="color: #091ed9;">{{ item.zb }}</div>
                  </div>
                </div>
              </div>
              <!-- <div class="yz-common-bar-item" >
                <div class="yz-common-bar-icon">
                  <div class="num">1</div>
                </div>
                <div class="yz-common-bar-progress">
                  <div class="yz-common-bar-progress-word">
                    <div>自助餐餐厅</div>
                    <div>213.1万元</div>
                  </div>
                  <div class="yz-common-bar-progress-line">
                    <div style="width: 70%" class="process"></div>
                    <div class="yz-common-bar-progress-line-tip">12%</div>
                  </div>
                </div>
              </div>
              <div class="yz-common-bar-item">
                <div class="yz-common-bar-icon"><div class="num">2</div></div>
                <div class="yz-common-bar-progress">
                  <div class="yz-common-bar-progress-word">
                    <div>自助餐餐厅</div>
                    <div>213.1万元</div>
                  </div>
                  <div class="yz-common-bar-progress-line">
                    <div style="width:80%" class="process"></div>
                    <div class="yz-common-bar-progress-line-tip">12%</div>
                  </div>
                </div>
              </div>
              <div class="yz-common-bar-item">
                <div class="yz-common-bar-icon"><div class="num">3</div></div>
                <div class="yz-common-bar-progress">
                  <div class="yz-common-bar-progress-word">
                    <div>自助餐餐厅</div>
                    <div>213.1万元</div>
                  </div>
                  <div class="yz-common-bar-progress-line">
                    <div style="width:60%" class="process"></div>
                    <div class="yz-common-bar-progress-line-tip">12%</div>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'年度车客流'" />
          <div class="yz-content-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="chart" ref="ndcklRef"></div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'今日服务质量跟踪'" />
          <div class="yz-content-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="echart_content">
              <div class="layui-col-xs6">
                <div ref="jrfwzlgzRef1" style="width:220px;height: 150px;padding-top: 18px;"></div>
                <div class="yz-cloumn">
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #95CA45;"></div>
                      <div class="minText">合格</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ hegeValue }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #0091FF;"></div>
                      <div class="minText">不合格</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ buhegeValue }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #44D7B6;"></div>
                      <div class="minText">未完成</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ weiwcValue }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-xs6">
                <div ref="jrfwzlgzRef2" style="width:220px;height: 150px;padding-top: 18px;"></div>
                <div class="yz-cloumn">
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #34BAC6;">
                        <div style="width: 55%;background: #FB4D8F;height: 10px;"></div>
                      </div>
                      <div class="minText">不合格</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ buhegeValue2 }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #FB4D8F"></div>
                      <div class="minText">未整改</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ wzgValue2 }}
                    </div>
                  </div>
                  <div class="yz-cloumn-6">
                    <div class="flex_bwt">
                      <div class="icon" style="background: #34BAC6;"></div>
                      <div class="minText">已整改</div>
                    </div>
                    <div class="flex_bwt_num">
                      {{ yzgValue2 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>


      </div>
    </div>
  </div>
  <!-- 底部菜单 -->
  <fwq-bottom-menu></fwq-bottom-menu>
</template>
<script setup>
import './../assets/content.css'
import './../assets/common.css'
import { getCurrentInstance, onMounted, ref, reactive } from "vue";
import ContentTitle from "./components/contentTitle.vue";
import { CountTo } from "vue3-count-to";
import MapTraffic from "./components/mapTraffic.vue";
import mapTop10Icon from '../assets/img/headquarters/前十名.png';
import mapOtherIcon from '../assets/img/headquarters/其它.png';
import black_coffic from "../assets/img/yztraffic/1.png";
import black_grey from "../assets/img/yztraffic/2.png";
import black_green from "../assets/img/yztraffic/3.png";
import black_symbol from "../assets/img/yztraffic/4.png";
import { drawLine } from "../util/chartUtil.js";
import { ajaxRequest } from "../api/code.js";
import FwqBottomMenu from "./components/fwqBottomMenu.vue";
import HeaderModule from "./components/headerModule.vue";

const chart = getCurrentInstance().proxy.$echarts
const isNumeric = function (value) {
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}

const state = reactive({
  xsxx: {
    zxs: 0,
    yz: 0,
    jq: 0,
    cd: 0,
    sc: 0,
    cy: 0,
    kf: 0,
    wysh: 0
  },
  jrcklxx: {
    cl_jt: 0,
    cl_zt: 0,
    cl_tbzzl: 0,
    kl_jt: 0,
    kl_zt: 0,
    kl_tbzzl: 0
  },
  spph: [
    { psnname: '自助餐餐厅1', taxsaleamnt: 153.6, zb: "46%" },
    { psnname: '自助餐餐厅2', taxsaleamnt: 133.6, zb: "36%" },
    { psnname: '自助餐餐厅3', taxsaleamnt: 53.6, zb: "16%" },
  ],
  ratioData: {
    kehuobi: "0:0",
    ruqulv: "0%",
    ruqulv_tb: "0"
  },
})


/* 中间营收统计 */
const currentZongxiaoshouOptionsOptions = ref({
  position: 0,
  num: "0"
})

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])
const curServer = ref("")
//选中服务区
const serverHandleChange = (selectItem) => {
  curServer.value = selectItem ?? ['', ''];
  refreshData();
}

//ab选择
const abItems = ref([{
  name: "综合",
  selected: true
}, {
  name: "东(南)",
  selected: false
}, {
  name: "西(北)",
  selected: false
}]);
const areaid = ref(null)
const areacode = ref(null) // 初始化地图数据
const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0) {
    areaid.value = null
    areacode.value = null
  }
  else if (selectIndex === 1) {
    areaid.value = 1177350;
    areacode.value = '01'
  }
  else if (selectIndex === 2) {
    areaid.value = 1177351;
    areacode.value = '02'
  }
  //切换分区刷新数据
  refreshData()
}

const dmyItems = ref([{
  name: "年",
  selected: false
}, {
  name: "月",
  selected: false
}, {
  name: "日",
  selected: true
}
]);
const dmyType = ref('day')
const dmyClick = function (selectIndex) {
  dmyItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0) {
    dmyType.value = 'year'
  }
  else if (selectIndex === 1) {
    dmyType.value = 'month'
  }
  else if (selectIndex === 2) {
    dmyType.value = 'day'
  }
  //切换分区刷新数据
  getXsxx()
  getLeft3Data()
  getRigth1Data()
}

const ckl1Ref = ref();
//车客流
const ckl1Op = ref({
  tooltip: {
    show: false,
  },
  series: [{
    type: 'pie',
    radius: ['75%', '90%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    z: 10,
    label: {
      position: 'center',
      formatter: () => {
        return (state.jrcklxx.cl_tbzzl * 100).toFixed(0) + "%"
        //return '+50%';
      },
      rich: {
        total: {
          fontSize: 20,
          color: '#fff',
        },
      },
      color: '#0DBBB3',
      fontSize: 10,
      lineHeight: 30,
    },
    data: [{
      value: (state.jrcklxx.cl_tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
      },
    },
    {
      value: 100 - (state.jrcklxx.cl_tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
      },
    }
    ],
    labelLine: {
      show: false,
    },
  },
  {
    type: 'pie',
    radius: ['54%', '74%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    label: {
      show: false,
    },
    data: [{
      value: (state.jrcklxx.cl_tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
        opacity: 0.4,
      },
    },
    {
      value: 100 - (state.jrcklxx.cl_tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
        opacity: 0.4,
      },
    }
    ],
    labelLine: {
      show: false,
    },
  }
  ],
})

const ckl2Ref = ref();
//车客流
const ckl2Op = ref({
  tooltip: {
    show: false,
  },
  series: [{
    type: 'pie',
    radius: ['75%', '90%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    z: 10,
    label: {
      position: 'center',
      formatter: () => {
        return (state.jrcklxx.kl_tbzzl * 100).toFixed(0) + "%"
        // return '-30%';
      },
      rich: {
        total: {
          fontSize: 20,
          color: '#fff',
        },
      },
      color: '#0DBBB3',
      fontSize: 10,
      lineHeight: 30,
    },
    data: [{
      value: (state.jrcklxx.kl_tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
      },
    },
    {
      value: 100 - (state.jrcklxx.kl_tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
      },
    }
    ],
    labelLine: {
      show: false,
    },
  },
  {
    type: 'pie',
    radius: ['54%', '74%'],
    center: ['50%', '50%'],
    hoverAnimation: false,
    label: {
      show: false,
    },
    data: [{
      value: (state.jrcklxx.kl_tbzzl * 100).toFixed(0),
      name: '1',
      itemStyle: {
        color: '#ffd302',
        opacity: 0.4,
      },
    },
    {
      value: 100 - (state.jrcklxx.kl_tbzzl * 100).toFixed(0),
      name: '2',
      itemStyle: {
        color: '#0DBBB3',
        opacity: 0.4,
      },
    }
    ],
    labelLine: {
      show: false,
    },
  }
  ],
})

//年度水电费用start
const ndsdfyRef = ref();
const ndsdfyXAxis = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']);
const ndsdfyData1 = ref([]);
const ndsdfyData2 = ref([]);
ndsdfyXAxis.value.forEach(a => {
  ndsdfyData1.value.push(parseInt(Math.random() * 100000 + 1));
})
ndsdfyXAxis.value.forEach(a => {
  ndsdfyData2.value.push(parseInt(Math.random() * 100000 + 1));
})

const ndsdfyOp = ref({
  legend: {
    data: ['用水', '用电'],
    right: "20",
    top: "18",
    icon: "rect",
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {
      color: '#FFFFFF'
    }
  },
  tooltip: {
    trigger: 'axis',
    showDelay: 1,
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
    borderWidth: 0,
    textStyle: {
      fontWeight: 'normal',
      fontSize: 13
    },
    padding: [10, 15],
    formatter: function (param) {
      console.log(param)
      var text = param[0].axisValueLabel;
      param.forEach(item => {
        if (item.seriesName) {
          text += "<br>"+item.seriesName+"：" + item.value
        }
      })
      return text;
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        color: 'rgba(193,228,255,0.31)'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#FFF',
      fontSize: 10
    },
    data: ndsdfyXAxis.value
  },
  yAxis: {
    type: 'value',
    name: "万元",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding: [0, 0, 0, -15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
  },
  series: [
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [12, 6],
      symbolOffset: [-7, -3], // 上部椭圆 位置
      symbolPosition: 'end',
      z: 12,
      label: {
        normal: {
          show: false,
          position: 'top',
          fontSize: 13,
          color: 'trans',
        },
      },
      color: '#72d1d2',
      data: ndsdfyData1.value,
    },
    // 中间的长方形柱状图(柱状图):bar
    {
      type: 'bar', // 柱状图
      name: '用水',
      barWidth: 12, // 柱条的宽度,不设时自适应
      itemStyle: {
        color: {
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false,
          "colorStops": [{
            "offset": 0, // 0%处的颜色
            "color": "#34bac6"
          }, {
            "offset": 1, // 100%处的颜色
            "color": "#72d1d2"
          }]
        }
      },
      data: ndsdfyData1.value,
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [12, 6],
      symbolOffset: [7, -3], // 上部椭圆 位置
      symbolPosition: 'end',
      z: 12,
      label: {
        normal: {
          show: false,
          position: 'top',
          fontSize: 13,
          color: '#FFFFFF',
        },
      },
      color: '#0091FF',
      data: ndsdfyData2.value,
    },
    // 中间的长方形柱状图(柱状图):bar
    {
      type: 'bar', // 柱状图
      name: '用电',
      barWidth: 12, // 柱条的宽度,不设时自适应
      itemStyle: {
        color: {
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false,
          "colorStops": [{
            "offset": 0, // 0%处的颜色
            "color": "#0091FF"
          }, {
            "offset": 1, // 100%处的颜色
            "color": "#72d1d2"
          }]
        }
      },
      data: ndsdfyData2.value,
    },
  ]
});

//年度水电费用end

//业态销售趋势

//业态销售趋势
//0=零售(超市) 1=餐饮 2=汽修 3=油站 4=客房 5=充电 6=物业 8=加气 9=其它
const ytxsqs_navs = ref([{
  type: null,
  name: '全部',
  selected: true
},
{
  type: 3,
  name: '油站',
  selected: false
}, {
  type: 8,
  name: '加气',
  selected: false
},
{
  type: 5,
  name: '充电',
  selected: false
}, {
  type: 0,
  name: '商超',
  selected: false
},
{
  type: 1,
  name: '餐饮',
  selected: false
}, {
  type: 4,
  name: '客房',
  selected: false
}, {
  type: 6,
  name: '物业商户',
  selected: false
}
])
//0-非自营  1-自营
const ytsxqs_navs_child = ref([{
  type: null,
  name: '全部',
  selected: true
}, {
  type: 0,
  name: '非自营',
  selected: false
}, {
  type: 1,
  name: '自营',
  selected: false
}])

const ytxsqs_modetype = ref(null);
const ytxsqs_modetype_child = ref(null);
const ytxsqsClick = function (selectIndex) {
  ytxsqs_modetype.value = selectIndex
  ytxsqs_navs.value.forEach((row, index) => {
    row.selected = (row.type === selectIndex);
  });
  //刷新数据
  getLeft3Data()
}
const ytxsqsChildClick = function (selectIndex) {
  ytxsqs_modetype_child.value = selectIndex
  ytsxqs_navs_child.value.forEach((row, index) => {
    row.selected = (row.type === selectIndex);
  });
  //刷新数据
  getLeft3Data()
}


const ytxsqsRef = ref();
const ytxsqs_x = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']);
const ytxsqs_y = ref([]);
ytxsqs_x.value.forEach(a => {
  ytxsqs_y.value.push(parseInt(Math.random() * 100000 + 1));
})
let ytxsqsOpt = ref({
  color: ['#02a6e4'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '35%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ytxsqs_x.value,
      axisLine: {
        lineStyle: {
          color: '#c1e4ff'
        }
      },
      axisLabel: {
        interval: 0,
        color: '#FFF',
        fontSize: 10
      },
    }
  ],
  yAxis: [
  {
    type: 'value',
    name: "万元",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding: [0, 0, 0, -15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
  }
  ],
  series: [
    {
      name: '业态',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 4
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: ytxsqs_y.value
    }
  ]
});
//业态销售趋势

//今日服务质量跟踪START
const ywcValue = ref(0);//已完成
const hegeValue = ref(0); //合格
const buhegeValue = ref(0); //不合格
const weiwcValue = ref(0); //未完成
const zrwValue = ref(hegeValue.value + buhegeValue.value + weiwcValue.value);//总任务

const jrfwzlgzRef1 = ref();
const getJrfwzlgzOp1 = function () {
  const jrfwzlgzOp1 = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        console.log(params)
        let value = 0;
        if (params.seriesIndex === 0) {
          value = hegeValue.value;
        } else if (params.seriesIndex === 1) {
          value = buhegeValue.value;
        } else if (params.seriesIndex === 2) {
          value = weiwcValue.value;
        }
        return `${params.seriesName}:${value}`;
      }
    },
    angleAxis: {
      show: false,
      max: zrwValue.value,
      type: 'value',
      startAngle: 180, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 15, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '50%'],
      radius: '115'
    },
    series: [{
      name: '合格',
      type: 'bar',
      data: [{ //上层圆环，显示数据
        value: hegeValue.value,
        itemStyle: {
          color: '#95CA45',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    }, {
      name: '不合格',
      type: 'bar',
      data: [{ //上层圆环，显示数据
        value: hegeValue.value + buhegeValue.value,
        itemStyle: {
          color: '#0091FF',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 2 //圆环层级，同zindex
    },
    { //下层圆环，显示最大值
      name: '未完成',
      type: 'bar',
      data: [{
        value: zrwValue.value,
        itemStyle: {
          color: '#44D7B6',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#FF5652'
      },
      detail: {
        show: false,
      },
      title: {
        show: false
      },
      data: [{}]
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#70D5FF'
      },
      detail: {
        formatter: function (params) {
          return '{a|' + ywcValue.value + '}\n{b|已完成}\n{c|总任务数 } {d|' + zrwValue.value + '}';

        },
        textStyle: {
          rich: {
            a: {
              fontSize: 24,
              color: '#fff',
              fontWeight: 'bold',
              lineHeight: 10
            },
            b: {
              fontSize: 14,
              color: '#fff',
              lineHeight: 40
            },
            c: {
              fontSize: 12,
              color: '#fff',

            },
            d: {
              fontSize: 12,
              color: '#1F85F5'
            }
          }
        },
        offsetCenter: [0, 14],
      },
      title: {
        show: false
      },
      data: [{
        value: ywcValue.value * 100 / zrwValue.value
      }]
    }
    ]
  }
  return jrfwzlgzOp1
}


const jrfwzlgzRef2 = ref();
const wzgValue2 = ref(0); //未整改
const yzgValue2 = ref(0); //已整改
const buhegeValue2 = ref(wzgValue2.value + yzgValue2.value); //不合格数量

const getJrfwzlgzOp2 = function () {
  const jrfwzlgzOp2 = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        let value = 0;
        if (params.seriesIndex === 0) {
          value = wzgValue2.value;
        } else if (params.seriesIndex === 1) {
          value = yzgValue2.value;
        }
        return `${params.seriesName}: ${value}`;
      }
    },
    grid: {
      top: '20%',
      containLabel: true,
    },
    angleAxis: {
      show: false,
      max: buhegeValue2.value,
      type: 'value',
      startAngle: 180, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 15, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '50%'],
      radius: '110'
    },
    series: [{
      type: 'bar',
      name: '未整改',
      data: [{ //上层圆环，显示数据
        value: wzgValue2,
        itemStyle: {
          color: '#FB4D8F',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    },
    { //下层圆环，显示最大值
      type: 'bar',
      name: '已整改',
      data: [{
        value: buhegeValue2.value,
        itemStyle: {
          color: '#34BAC6',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      itemStyle: {
        color: '#70D5FF'
      },
      detail: {
        formatter: function (params) {
          return '{a|' + yzgValue2.value + '}\n{b|已整改}\n{c|不合格明细 } {d|' + buhegeValue2.value + '}';

        },
        textStyle: {
          rich: {
            a: {
              fontSize: 24,
              color: '#FFF',
              fontWeight: 'bold',
              lineHeight: 10
            },
            b: {
              fontSize: 14,
              color: '#FFF',
              lineHeight: 40
            },
            c: {
              fontSize: 12,
              color: '#FFF',

            },
            d: {
              fontSize: 12,
              color: '#1F85F5'
            }
          }
        },
        offsetCenter: [0, 14],
      },
      title: {
        show: false
      },
      data: [{
        value: yzgValue2 * 100 / buhegeValue2.value
      }]
    }
    ]
  }
  return jrfwzlgzOp2
}

//今日服务质量跟踪END


//年度车客流
const ndckl_x = ref(['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']);
const ndckl_y_1 = ref([]);
const ndckl_y_2 = ref([]);
ndckl_x.value.forEach(a => {
  ndckl_y_1.value.push(parseInt(Math.random() * 100000 + 1));
  ndckl_y_2.value.push(parseInt(Math.random() * 100000 + 1));
})
const ndcklRef = ref();
const ndcklOpt = ref({
  color: ['#34BAC6', '#0091FF'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'rgba(0,145,255,0.55)',
        width: 1
      }
    },
  },
  legend: {
    data: ['车流', '客流'],
    right: "20",
    top: "18",
    icon: "rect",
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {
      color: '#FFF'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ndckl_x.value,
      axisLine: {
        lineStyle: {
          color: '#c1e4ff'
        }
      },
      axisLabel: {
        interval: 0,
        color: '#FFF',
        fontSize: 10
      },
    }
  ],
  yAxis: [
  {
    type: 'value',
    name: "万次",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding: [0, 0, 0, -15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(127, 127, 127, 1)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
  }
  ],
  series: [
    {
      name: '车流',
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#05EDDB'
          },
          {
            offset: 1,
            color: 'rgba(0,145,255,0.00)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndckl_y_1.value
    },
    {
      name: '客流',
      type: 'line',
      // stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#00C4FF'
          },
          {
            offset: 1,
            color: 'rgba(0,145,255,0.00)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndckl_y_2.value
    }
  ]
})


//0=零售(超市) 1=餐饮 2=汽修 3=油站 4=客房 5=充电 6=物业 8=加气 9=其它
const spph_navs = ref([{
  type: null,
  name: '全部',
  selected: true
},
{
  type: 3,
  name: '油站',
  selected: false
}, {
  type: 8,
  name: '加气',
  selected: false
},
{
  type: 5,
  name: '充电',
  selected: false
}, {
  type: 0,
  name: '商超',
  selected: false
},
{
  type: 1,
  name: '餐饮',
  selected: false
}, {
  type: 4,
  name: '客房',
  selected: false
}, {
  type: 6,
  name: '物业商户',
  selected: false
}
])

const spph_modetype = ref(null);
const spphClick = function (selectIndex) {
  spph_modetype.value = selectIndex
  spph_navs.value.forEach((row, index) => {
    row.selected = (row.type === selectIndex);
  });
  getRigth1Data()
}

const wcRef1 = ref();
const cwTotal = ref(0);//男厕占用数
const cwMax1 = ref(1);//男厕总数
const getWcOp1 = function () {
  return {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesName === '空闲') {
          return "空闲："+(cwMax1.value - cwTotal.value)+"  ("+((cwMax1.value - cwTotal.value)/cwMax1.value*100).toFixed(2)+"%)"
        }
        else if (params.seriesName === '占用') {
          return "占用："+cwTotal.value+"  ("+(cwTotal.value/cwMax1.value*100).toFixed(2)+"%)"
        }
      }
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      icon: 'diamond',
      right: 5,
      data: ['占用', '空闲'],
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        color: '#ffffff'
      }
    },
    angleAxis: {
      show: false,
      max: cwMax1.value,
      type: 'value',
      startAngle: 360, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 8, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['40%', '45%'],
      radius: '110'
    },
    series: [{
      type: 'bar',
      name: '占用',
      color: '#2df3ff',
      data: [{ //上层圆环，显示数据
        value: cwTotal.value,
        itemStyle: {
          color: '#2df3ff',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    },
    { //下层圆环，显示最大值
      type: 'bar',
      name: '空闲',
      color: '#ff7552',
      data: [{
        value: cwMax1.value,
        itemStyle: {
          color: '#ff7552',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      detail: {
        show: true,
        formatter: function (params) {
          return '{a|' + cwMax1.value + '}\n{b|男厕总厕位}';
        },
        textStyle: {
          rich: {
            a: {
              fontSize: 28,
              color: '#FFF',
              fontWeight: 'bold',
              lineHeight: 20,
            },
            b: {
              fontSize: 14,
              color: '#FFF',
              lineHeight: 40,
            }
          }
        },
        offsetCenter: ['-22', 14],
      },
      data: [{
        value: 0
      }]
    }
    ]
  }
}

const wcRef2 = ref();
const cwTotal2 = ref(0);//女厕占用
const cwMax2 = ref(1);//女厕总数
const getWcOp2 = function () {
  return {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesName === '空闲') {
          return "空闲："+(cwMax2.value - cwTotal2.value)+"  ("+((cwMax2.value - cwTotal2.value)/cwMax2.value*100).toFixed(2)+"%)"
        }
        else if (params.seriesName === '占用') {
          return "占用："+cwTotal2.value+"  ("+(cwTotal2.value/cwMax2.value*100).toFixed(2)+"%)"
        }
      }
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      icon: 'diamond',
      right: 10,
      data: ['占用', '空闲'],
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        color: '#FFF'
      }
    },
    angleAxis: {
      show: false,
      max: cwMax2.value,
      type: 'value',
      startAngle: 360, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 8, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      // center: ['35%', '45%'],
      center: ['40%', '45%'],
      radius: '110'
    },
    series: [{
      type: 'bar',
      name: '占用',
      color: '#2df3ff',
      data: [{ //上层圆环，显示数据
        value: cwTotal2.value,
        itemStyle: {
          color: '#2df3ff',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    },
    { //下层圆环，显示最大值
      type: 'bar',
      name: '空闲',
      color: '#ff7552',
      data: [{
        value: cwMax2.value,
        itemStyle: {
          color: '#ff7552',
          borderWidth: 0,
        },
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    //仪表盘
    {
      type: 'gauge',
      startAngle: 180, //起始角度，同极坐标
      endAngle: 0, //终止角度，同极坐标
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLabel: {
        show: false
      },
      pointer: { // 分隔线
        show: false,
        width: 0
      },
      detail: {
        show: true,
        formatter: function (params) {
          return '{a|' + cwMax2.value + '}\n{b|女厕总厕位}';
        },
        textStyle: {
          rich: {
            a: {
              fontSize: 28,
              color: '#FFF',
              fontWeight: 'bold',
              lineHeight: 20,
            },
            b: {
              fontSize: 14,
              color: '#FFF',
              lineHeight: 40,
            }
          }
        },
        offsetCenter: ['-22', 14],
      },
      data: [{
        value: 0
      }]
    }
    ]
  }
}

const wcRef3 = ref();
const wcNames = ref(['占用', '空闲', '异常'])
const wcColor = ref(['#2DF3FF', '#22A45D', '#FF7552']);
const wcValues = ref([0, 0, 0]);
const max = ref(0);
const getWcOp3 = function () {
  return {
    legend: {
      orient: 'vertical',
      top: 'center',
      icon: 'diamond',
      right: 10,
      data: wcNames.value,
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        color: '#FFF'
      }
    },
    // backgroundColor: '#131D25',
    color: wcColor.value,
    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)"
    },
    title: {
      text: '{a|' + max.value + '}\n{c|' + '总车位' + '}',
      x: '30%',
      y: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 28,
            color: '#FFF'
          },
          c: {
            fontSize: 14,
            color: '#FFF',
            padding: [7, 0],
          },
        },
      },
    },
    series: [
      {

        type: 'pie',
        center: ['43%', '45%'],//左右 高低
        radius: ['50%', '60%'],
        label: {
          show: false,
        },
        data: [
          {
            value: wcValues.value[0],
            name: wcNames.value[0]
          },
          {
            value: wcValues.value[1],
            name: wcNames.value[1]
          },
          {
            value: wcValues.value[2],
            name: wcNames.value[2]
          }
        ],
      }
    ],
  }
}


let ckl1OpChart, ckl2OpChart, ndsdfyOpChart, ytxsqsOptChart, ndcklOptChart, jrfwzlgzOp1Chart, jrfwzlgzOp2Chart
let wcOp1Chart, wcOp2Chart, wcOp3Chart
onMounted(() => {
  ckl1OpChart = drawLine(ckl1Ref.value, ckl1Op.value)
  ckl2OpChart = drawLine(ckl2Ref.value, ckl2Op.value)
  ndsdfyOpChart = drawLine(ndsdfyRef.value, ndsdfyOp.value)
  ytxsqsOptChart = drawLine(ytxsqsRef.value, ytxsqsOpt.value)
  ndcklOptChart = drawLine(ndcklRef.value, ndcklOpt.value)
  jrfwzlgzOp1Chart = drawLine(jrfwzlgzRef1.value, getJrfwzlgzOp1())
  jrfwzlgzOp2Chart = drawLine(jrfwzlgzRef2.value, getJrfwzlgzOp2())
  wcOp1Chart = drawLine(wcRef1.value, getWcOp1())
  wcOp2Chart = drawLine(wcRef2.value, getWcOp2())
  wcOp3Chart = drawLine(wcRef3.value, getWcOp3())
  refreshData()
})
let timer = null
const refreshData = () => {
  getXsxx()
  getKehuobi()
  getLeft1Data()
  getLeft2Data()
  getLeft3Data()
  getRigth1Data()
  getRigth2Data()
  getRigth3Data()
  getSsdtData()
  autoRefreshData()
}
// xx分钟刷新
const autoRefreshData = () => {
  if (timer) {
    clearInterval(timer)
  }
  timer = setInterval(async () => {
    getXsxx()
    getRigth1Data()
    getSsdtData()
    //当日数据时，自动刷新
    if ("day" === dmyType.value) {
      getKehuobi()
      getLeft1Data()
    }
  }, 300*1000)
}

/**
 * 获取销售信息
 */
async function getXsxx() {
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value,
    validatecode: dmyType.value
  }
  const res = await ajaxRequest('post', 'getXsxxZhkbfwq', params)
  if (res.data) {
    //总数
    // currentZongxiaoshouOptionsOptions.value.num = res.data.zxs_by ? res.data.zxs_by.toFixed(2) + "" : "0"
    currentZongxiaoshouOptionsOptions.value.num =(res.data.yzxs_by+res.data.jqxs_by+res.data.cdxs_by+res.data.csxs_by+res.data.ctxs_by+res.data.kfxs_by+res.data.wyxs_by).toFixed(2)
    state.xsxx.yz = res.data.yzxs_by.toFixed(2);
    state.xsxx.jq = res.data.jqxs_by.toFixed(2);
    state.xsxx.cd = res.data.cdxs_by.toFixed(2);
    state.xsxx.sc = res.data.csxs_by.toFixed(2);
    state.xsxx.cy = res.data.ctxs_by.toFixed(2);
    state.xsxx.kf = res.data.kfxs_by.toFixed(2);
    state.xsxx.wysh = res.data.wyxs_by.toFixed(2);
    
  }
}

/**
 * 客货比
 */
async function getKehuobi() {
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getKehuobiZhkbfwq', params)
  if (res.data) {
    state.ratioData.kehuobi = res.data
  }
}


/**
 * 获取今日车客流信息
 */
async function getLeft1Data() {
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getJrCklxxZhkbfwq', params)
  if (res.data) {
    state.jrcklxx = res.data
  }
  ckl1OpChart.setOption(ckl1Op.value)
  ckl2OpChart.setOption(ckl2Op.value)
}


/**
 * 获取年度水电费信息
 */
async function getLeft2Data() {
  ndsdfyData1.value = []
  ndsdfyData2.value = []
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getNdsdfxxZhkbfwq', params)
  if (res.data) {
    res.data.forEach(item => {
      if (item.flprjexp == "水费") {
        ndsdfyData1.value[parseInt(item.month) - 1] = item.cnt ?? 0;
      } else if (item.flprjexp == "电费") {
        ndsdfyData2.value[parseInt(item.month) - 1] = item.cnt ?? 0;
      }
    });
  }
  ndsdfyOp.value.series[0].data = ndsdfyData1.value
  ndsdfyOp.value.series[1].data = ndsdfyData1.value
  ndsdfyOp.value.series[2].data = ndsdfyData2.value
  ndsdfyOp.value.series[3].data = ndsdfyData2.value
  ndsdfyOpChart.setOption(ndsdfyOp.value)
}


/**
 * 获取业态销售
 */
async function getLeft3Data() {
  ytxsqs_y.value = []
  const params = {
    modetype: ytxsqs_modetype.value,
    type: ytxsqs_modetype_child.value,
    validatecode: dmyType.value,
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getYtxsqsZhkbfwq', params)
  if (res.data) {
    res.data.forEach(item => {
      ytxsqs_y.value[parseInt(item.month) - 1] = (item.taxsaleamnt / 10000).toFixed(2);
    });
  }
  ytxsqsOpt.value.series[0].data = ytxsqs_y.value
  ytxsqsOptChart.setOption(ytxsqsOpt.value)
}


/**
 * 商铺排行
 */
async function getRigth1Data() {
  const params = {
    validatecode: dmyType.value,
    modetype : spph_modetype.value,
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getSpphZhkbfwq', params)
  if (res.data) {
    state.spph = res.data
  }
}


/**
 * 年度车客流
 */
async function getRigth2Data() {
  ndckl_y_1.value = []
  ndckl_y_2.value = []
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getNdcklZhkbfwq', params)
  if (res.data && res.data.cl) {
    res.data.cl.forEach((item) => {
      ndckl_y_1.value[parseInt(item.month) - 1] = (item.cl / 10000).toFixed(2);
    })
  }
  if (res.data && res.data.kl) {
    res.data.kl.forEach((item) => {
      ndckl_y_2.value[parseInt(item.month) - 1] = (item.kl / 10000).toFixed(2);
    })
  }
  ndcklOpt.value.series[0].data = ndckl_y_1.value;
  ndcklOpt.value.series[1].data = ndckl_y_2.value;
  ndcklOptChart.setOption(ndcklOpt.value)
}


/**
 * 今日服务质量跟踪
 */
async function getRigth3Data() {
  ywcValue.value = 0
  hegeValue.value = 0
  buhegeValue.value = 0
  weiwcValue.value = 0
  zrwValue.value = 0
  wzgValue2.value = 0
  yzgValue2.value = 0
  buhegeValue2.value = 0
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getFwzlgzZhkbfwq', params)
  if (res.data) {
    //已完成
    ywcValue.value = res.data.ywc
    //合格
    hegeValue.value = res.data.hg
    //不合格
    buhegeValue.value = res.data.bhg
    //未完成
    weiwcValue.value = res.data.wwc
    //总任务
    zrwValue.value = hegeValue.value + buhegeValue.value + weiwcValue.value

    wzgValue2.value = res.data.wzg
    yzgValue2.value = res.data.yzg
    buhegeValue2.value = wzgValue2.value + yzgValue2.value
  }
  jrfwzlgzOp1Chart.setOption(getJrfwzlgzOp1())
  jrfwzlgzOp2Chart.setOption(getJrfwzlgzOp2())
}

/**
 * 实时动态
 */
async function getSsdtData() {
  const params = {
    compid: curServer.value[1],
    areacode: areacode.value
  }
  //厕位信息
  const cesuo = await ajaxRequest('post', 'getCeweiDongTaiZhkbfwq', params)
  if (cesuo.data) {
    cesuo.data.forEach(item => {
      //男厕
      if (0 == item.type) {
        cwTotal.value = item.zys
        cwMax1.value = item.zs
      }
      //女厕
      else if (1 == item.type) {
        cwTotal2.value = item.zys
        cwMax2.value = item.zs
      }
    });
  }
  wcOp1Chart.setOption(getWcOp1())
  wcOp2Chart.setOption(getWcOp2())
  //车位信息
  const res = await ajaxRequest('post', 'getCwxxZhkbfwq', params)
  if (res.data) {
    wcValues.value[0] = res.data.zycw;
    wcValues.value[1] = res.data.sycw;
    wcValues.value[2] = 0;
    max.value = res.data.zcw;
    wcOp3Chart.setOption(getWcOp3())
  }
}


</script>
<style scoped>
.ckl {
  display: flex;
  width: 100%;

  .ckl-item {
    width: 50%;
    background: url("../assets/img/headquarters/车客流框.png") no-repeat center;
    padding-left: 5vh;
    padding-top: 5.8vh;

    .ckl-flex-between {
      padding-left: 1vh;
      display: flex;

      .ckl-title {
        padding-right: 1vh;

        .ckl-title-p1 {
          font-size: 1.6vh;
          padding-bottom: 0.5vh;
          padding-top: 1vh;
        }

        .ckl-title-p2 {
          color: #00EAFF;
        }
      }
    }
  }

  .ckl-bottom {
    display: flex;
    margin-top: 1.6vh;
    font-size: 1.4vh;
    padding-left: 1vh;

    .ckl-bottom-value {
      color: #00EAFF;
    }
  }
}
.yz-common-small-title2{
  right: 0;
  width: 100%;
}
.top3 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1vh;
  padding:0 2vh 0 0;
  .md-5{
    width: 12.5%;
  }
  .md-4{
    width: 10%;
  }
  .yz-common-title-nav {
    color: white;
    text-align: center;
    font-size: 1.4vh;
    position: relative;
    .rightLine{
      position: absolute;
      right: -4px;
    }
  }
  .yz-common-title-nav.selected{
    border-bottom: none;
  }
  .yz-common-title-nav.selected .nav-title{
    border-bottom: 2px solid #3DBDC8;
    padding-bottom: 2px;
  }
}

.minText {
  width: 60px;
  text-align: left;
}

.yz-cloumn-6 {
  flex-wrap: nowrap;
  width: 50%;
  margin-right: 0;
  margin-left: 0;
  font-size: 13px;
}

.yz-cloumn .flex_bwt_num {
  color: white;
}

.is-circle {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .yz-box2-item {
    background: url("../assets/img/headquarters/1.png") no-repeat center center;
    margin: 0;
    border: none;
    height: 15vh;
    padding-top: 6vh;

    .yz-box2-p {
      font-weight: bolder;
      font-size: 2vh;
    }

    .center {
      font-weight: normal;
      font-size: 1.6vh;
    }
  }
}

.is-wc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  bottom: 3vh;

  .yz-box2-item {
    background: url("../assets/img/headquarters/实时动态.png") no-repeat center center;
    background-size: 100%;
    margin: 1vh;
    border: none;
    height: 100%;
  }
}

.wc-charts {
  height: 198px !important;
}

.yz-content-bg{
  border-radius: 0;
  border:none;
  background: url("../assets/img/public/bodyModule/底.png") no-repeat;
  background-size: 100% 100%;
}

</style>
